<template>
  <div>
    <Collapse>
      <Panel
        v-for="(fruit, index) in fruitDatas"
        :key="index"
        :name="index.toString()"
      >
        <Checkbox
          :indeterminate="fruit.isIndeterminate"
          :value="fruit.isCheck"
          @click.prevent.native.stop="
            handleFruitCheckAll(fruit.isIndeterminate, index)
          "
        ></Checkbox>
        全选

        <ul slot="content">
          <CheckboxGroup
            v-model="fruitCheckAllGroup[index]"
            @on-change="fruitCheckAllGroupChange"
          >
            <li v-for="item in fruit.datas" :key="item.id">
              <Checkbox :label="item.id"></Checkbox>
              {{ item.name }}
            </li>
          </CheckboxGroup>
        </ul>
      </Panel>
    </Collapse>
    <h4 class="mat-2">折叠面板多选框选择的结果：</h4>
    <div class="check-result bor-all mat-2">
      {{ fruitCheckAllGroup }}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      fruitDatas: [
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 1,
              name: '香蕉'
            },
            {
              id: 2,
              name: '苹果'
            },
            {
              id: 3,
              name: '西瓜'
            }
          ]
        },
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 4,
              name: '葡萄'
            },
            {
              id: 5,
              name: '橘子'
            },
            {
              id: 6,
              name: '哈密瓜'
            }
          ]
        },
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 7,
              name: '圣女果'
            },
            {
              id: 8,
              name: '草莓'
            },
            {
              id: 9,
              name: '柠檬'
            }
          ]
        }
      ],
      currentIndex: null,
      fruitCheckAllGroup: [[], [], []]
    }
  },
  methods: {
    handleFruitCheckAll (isIndeterminate, currentIndex) {
      this.currentIndex = currentIndex
      this.fruitDatas.map((fruit, index) => {
        if (index === currentIndex) {
          if (isIndeterminate) {
            fruit.isCheck = false
          } else {
            fruit.isCheck = !fruit.isCheck
          }

          fruit.isIndeterminate = false

          if (fruit.isCheck) {
            // 若直接将 fruitCheckAllGroup 代入运算则全选和取消全选会出现错乱
            let checkFrunts = []
            fruit.datas.map(item => {
              checkFrunts.push(item.id)
            })

            this.fruitCheckAllGroup[index] = checkFrunts
          } else {
            this.fruitCheckAllGroup[index] = []
          }
        }
      })
    },
    fruitCheckAllGroupChange (data) {
      this.fruitDatas.map((frunt, index) => {
        if (index === this.currentIndex) {
          if (data.length === frunt.datas.length) {
            frunt.isIndeterminate = false
            frunt.isCheck = true
          } else if (data.length > 0) {
            frunt.isIndeterminate = true
            frunt.isCheck = false
          } else {
            frunt.isIndeterminate = false
            frunt.isCheck = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.check-result {
  border-radius: $border-radius-small;
  padding: $padding-sm;
  @include w-h(500px, 80px);
}
li {
  list-style: none;
}
</style>
<style lang="scss">
.ivu-checkbox + span,
.ivu-checkbox-wrapper + span {
  display: none;
}
</style>
